<script lang="ts" setup>
// #region 引入包, 函数和组件
import { ref } from "vue"
import { commentPlaylistApi, playlistDetailApi } from "@/services" // 歌单详情接口
import { onLoad } from "@dcloudio/uni-app"
import Loading from "@/components/Loading.vue" // 加载中组件
import { useMusicStore } from "@/store"
import type { Playlist, PlaylistItem } from "@/services/type"
import PlaylistHeader from "./components/PlaylistHeader.vue" // 歌单头部组件
import PlaylistSongs from "./components/PlaylistSongs.vue" // 歌曲列表组件
import Comment from "@/components/Comment.vue" // 评论组件
import PlayerOut from '@/components/PlayerOut.vue'

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const music = useMusicStore() // 全局的状态管理
const props = defineProps<{ id: string }>()
// #endregion

// #region // 变量
const playlist = ref<PlaylistItem[]>([])
const detail = ref<Playlist>()
const id = ref<number | string>()
const com = ref<InstanceType<typeof Comment> | null>(null)
const commentList = ref()
// #endregion

// #region // 函数
const getPlaylistDetail = async (id: number | string) => {
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调接口获取数据
    const res = await playlistDetailApi(id)
    // 接受数据
    detail.value = res.playlist
    playlist.value = res.playlist.tracks
    console.log(res)
    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// 获取歌单评论
const getPlaylistComment = async (id: number | string) => {
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调接口获取数据
    const res = await commentPlaylistApi(id)
    // 接受数据
    // detail.value = res.playlist
    // playlist.value = res.playlist.tracks
    console.log(res)
    commentList.value = res
    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数
onLoad((query) => {
  console.log(query!.id)
  id.value = query!.id
  // 获取详情
  getPlaylistDetail(query!.id)
})
// #endregion
</script>

<template>
  <view class="app">
    <scroll-view
      :class="['playList', { has_player: music.song && music.currentIndex + 1 }]"
      scroll-y
    >
      <playlist-header
        @getComment="getPlaylistComment"
        :data="detail"
        @open="com?.open"
      ></playlist-header>
      <playlist-songs
        :list="playlist"
        :data="detail"
      ></playlist-songs>
      <Loading></Loading>
      <Comment :list="commentList" ref="com"></Comment>
    </scroll-view>
    <player-out></player-out>
  </view>
</template>

<style lang="scss" scoped>
.playList {
  width: 100%;
  height: calc(100vh - var(--window-top) - var(--window-bottom));
}
.has_player {
  height: calc(100vh - var(--window-top) - var(--window-bottom) - 100rpx);
}
</style>
